<template>
  <div class="maplocation">
    <!-- <Titlehead uname="可疑设备" /> -->

    <div id="container">
      <div class="boxs_center">
        <div class="box_top_onrow" v-for="(item,index) in toplist" :key="index">
         
          <div class="top_">
            
            <img class="image_top" :src="require('@/assets/'+item.image+'.png')" alt="">
            
            {{item.name}}</div>
          <div class="top_text_">{{item.nub}}

            <span class="box_units">{{item.unitnub}}</span>
          </div>

        </div>
      </div>
      <PaichartsMap />
    </div>
  </div>
</template>

<script>
// import Titlehead from "./firstTitle";
import PaichartsMap from "../charts/paichartsmap";

export default {
  data() {
    return {
      toplist: [
        {
          name: "总用户数",
          nub: "513.3",
          unitnub: "万人",
          image:"jihuobili"
        },
        {
          name: "小区数量",
          nub: "17355",
          unitnub: "个",
          image:"zhandian"

        },
        {
          name: "站点数量",
          nub: "65200",
          unitnub: "个",
          image:"zhandianss"

        },
        {
          name: "设备数量",
          nub: "2222",
          unitnub: "台",
          image:"tianchong"

        },
        {
          name: "插孔数量",
          nub: "75000",
          unitnub: "个",
          image:"shebei"

        },
      ],
    };
  },
  components: {
    // Titlehead,
    PaichartsMap,
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import url("./font.scss");

#container {
  width: 100%;
  height: 900px;
  // background: url("../../assets/");
  //   margin: 15px;
}
.maplocation {
  position: relative;
}
.pointboxs {
  display: inline-block;
  position: absolute;

  background: rgba(116, 116, 116, 0.363);
  width: 280px;
  height: 100px;
  z-index: 15;
  right: 0;
  top: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  font-size: 15px;
}
.onlines {
  color: #4cff06;
}
.noonline {
  color: #ff0000dd;
}
.onrow {
  text-align: center;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.boxs_center {
  display: inline-block;
  // background: red;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .box_top_onrow{
    width: calc(100% / 5);
    // padding: 25px;
    margin-top: 25px;
    .top_{
      .image_top{
    width: 30px;
    height: 30px;
    margin-right: 10px;
      }
  font-family: 'PangMenZhengDao';
      font-size: 22px;
    display: flex;
    align-items: center;
    }
    .top_text_{
      padding-top: 10px;
  font-family: 'PangMenZhengDao';
  font-size: 25px;

    }
  }
}
</style> 